Skip to content

New Board Selector UI: show port protocol #1193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 9 commits into from
Jul 15, 2022
Merged

New Board Selector UI: show port protocol #1193

merged 9 commits into from
Jul 15, 2022

Conversation

AlbyIanna
Copy link
Contributor

@AlbyIanna AlbyIanna commented Jul 14, 2022 •
edited
Loading

Motivation

This PR addresses a number of UX/UI improvements about the Board Selector.

This is the new expected behavior when starting with a sketch with no prior board selected:

  1. the Board Selector shows "Select Board"
  2. hovering over the Board Selector will make a tooltip appear saying "Disconnected"
  3. clicking on the Board Selector will open the dropdown, showing a list of boards, with an icon on the left indicating the protocol (e.g.: usb)
  4. clicking on a recognized board (not "Unknown") will close the dropdown and select the board
  5. the Board Selector now shows the protocol icon on the left, followed by the name of the selected board
  6. hovering over the Board Selector will make a tooltip appear showing the name off the board (e.g.: "Arduino MKR WiFi 1010") with a bold font
  7. unplugging the board will make the protocol icon disappear and the board name font is not bold anymore
  8. hovering over the Board Selector will make a tooltip appear saying "Disconnected"
  9. replugging the board will make the protocol icon reappear and the font is bold again (as in step 5.)
  10. clicking on the Board Selector and selecting an Unknown board will make the Select Board dialog appear with an overlay
  11. Clicking "Cancel" will make the Select Board dialog diappear, and the Board Selector will show the label "Select Board" again
  12. hovering over the Board Selector will make a tooltip appear saying "Disconnected"

Change description

  • Show a nice icon indicating which protocol the ports are using ("serial", "network", ecc...)
  • Remove misguiding red cross indicating a board is disconnected
  • Show the board/port info in a prettier way
  • make boards in the dropdown focusable
  • other cosmetic improvements 💄

Other information

Reviewer checklist

  • PR addresses a single concern.
  • The PR has no duplicates (please search among the Pull
    Requests     before creating
    one)
  • PR title and description are properly filled.
  • Docs have been added / updated (for bug fixes / features)

AlbyIanna
AlbyIanna commented Jul 14, 2022
View reviewed changes
arduino-ide-extension/src/common/protocol/boards-service.ts
Comment on lines +8 to +10
export function byProtocol(
availablePorts: AvailablePorts
): Map<string, AvailablePorts> {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On this file there's no significant change, I've just formatted the code 💄

@per1234 per1234 added the topic: code Related to content of the project itself label Jul 15, 2022
@kittaakos
Copy link
Contributor

It looks great! I did not check the code but the functionality this time.

It does not work correctly with the HC theme:
Screen Shot 2022-07-15 at 10 31 10

There is some overlay issue with the HC theme:

board_selector_hc_theme.mp4

No hover with HC or dark theme. It works with the light theme.

no_hover_dark_theme.mp4

I can unselect a board. This is a regression. I do not know if it's on purpose.

RC-8:

select_board_cancel_does_not_change_rc8.mp4

From the PR:

can_unselect_board_with_cancel.mp4

@AlbyIanna
Copy link
Contributor Author

@kittaakos thank you for the functional review. @91volt is working to find the right color variables to fix dark and hc themes 🔨

@AlbyIanna AlbyIanna requested a review from 91volt July 15, 2022 09:55
@AlbyIanna AlbyIanna force-pushed the select-board-with-protocol branch from c6b6760 to 509ba75 Compare July 15, 2022 13:05
@kittaakos
Copy link
Contributor

Very nice! Is there a chance to restore the border of the board select dropdown on the HC theme? I assume it has nothing to do with the colors.

RC-8:
Screen Shot 2022-07-15 at 15 59 49

PR build:
Screen Shot 2022-07-15 at 15 59 11

@kittaakos
Copy link
Contributor

No hover with HC or dark theme. It works with the light theme.

Please open a follow-up once this is merged. Thank you!

@kittaakos
Copy link
Contributor

Can you please remove this thing? It happens when I hover over the board select dropdown. Please reference the screencast.

hover_board_select.mp4

As I see it's always there when the cursor is above the toolbar:

hover_toolbar.mp4

@AlbyIanna
Copy link
Contributor Author

Can you please remove this thing? It happens when I hover over the board select dropdown. Please reference the screencast.

It's weird because I saw that rectangle before, but I cannot reproduce it with the last commit 🤔 Did you notice you did something specific to "activate" this behavior?

@AlbyIanna
Copy link
Contributor Author

Very nice! Is there a chance to restore the border of the board select dropdown on the HC theme? I assume it has nothing to do with the colors.

@kittaakos actually there's not an easy way to do it because in the new UI @91volt the Board Selector doesn't have a border in the collapsed state. We'll surely address it when fixing the High Contrast globally.

@kittaakos kittaakos self-requested a review July 15, 2022 15:25
kittaakos
kittaakos approved these changes Jul 15, 2022
View reviewed changes
Copy link
Contributor

@kittaakos kittaakos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the changes and the code looks OK. 👍 Thank you!

Somobody else who knows the requirements should also check the PR.

If you decide not to fix all review issues, please open a follow-up task with the TODOs.

@AlbyIanna
Copy link
Contributor Author

Thanks @kittaakos!

Somobody else who knows the requirements should also check the PR.

@91volt did a review today and he was okay with the changes but forgot to approve the PR.

If you decide not to fix all review issues, please open a follow-up task with the TODOs.

We'll open an issue for the HC issues.

Can you please remove this thing? It happens when I hover over the board select dropdown. Please reference the screencast.

About this "ghost rectangle" I'll open an issue when I manage to reproduce it again.

@AlbyIanna AlbyIanna merged commit 4f27725 into main Jul 15, 2022
@AlbyIanna AlbyIanna deleted the select-board-with-protocol branch July 15, 2022 16:04
This was referenced Jul 15, 2022
Closed
Closed
This was referenced Jul 19, 2022
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kittaakos kittaakos kittaakos approved these changes

@per1234 per1234 Awaiting requested review from per1234

@francescospissu francescospissu Awaiting requested review from francescospissu

@91volt 91volt Awaiting requested review from 91volt

Assignees
No one assigned
Labels
topic: code Related to content of the project itself
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@AlbyIanna @kittaakos @per1234